/*
 Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 SPDX-License-Identifier: Apache-2.0
*/

@use '../internal/styles' as styles;
@use '../internal/styles/tokens' as awsui;

$arrow-height: 10px;

.container {
  display: inline-block;
  position: fixed;
  inset-block-start: -9999px;
  inset-inline-start: -9999px;
  z-index: 2000;

  // A little pseudoelement to extend the container to the space between the
  // popover and the trigger to avoid hover-based popovers/tooltips from
  // closing too eagerly when the cursor goes between them.
  &::before {
    content: '';
    position: absolute;
  }

  &:has(&-arrow-position-bottom-left),
  &:has(&-arrow-position-bottom-center),
  &:has(&-arrow-position-bottom-right) {
    &::before {
      inset-inline: 0;
      inset-block-start: -$arrow-height;
      block-size: $arrow-height;
    }
  }

  &:has(&-arrow-position-top-left),
  &:has(&-arrow-position-top-center),
  &:has(&-arrow-position-top-right) {
    &::before {
      inset-inline: 0;
      inset-block-end: -$arrow-height;
      block-size: $arrow-height;
    }
  }

  &:has(&-arrow-position-right-top),
  &:has(&-arrow-position-right-bottom) {
    &::before {
      inset-block: 0;
      inset-inline-start: -$arrow-height;
      inline-size: $arrow-height;
    }
  }

  &:has(&-arrow-position-left-top),
  &:has(&-arrow-position-left-bottom) {
    &::before {
      inset-block: 0;
      inset-inline-end: -$arrow-height;
      inline-size: $arrow-height;
    }
  }
}

.container-body {
  @include styles.styles-reset;
  border-start-start-radius: awsui.$border-radius-popover;
  border-start-end-radius: awsui.$border-radius-popover;
  border-end-start-radius: awsui.$border-radius-popover;
  border-end-end-radius: awsui.$border-radius-popover;
  background-color: awsui.$color-background-popover;
  box-shadow: awsui.$shadow-popover;
  border-block: awsui.$border-width-popover solid awsui.$color-border-popover;
  border-inline: awsui.$border-width-popover solid awsui.$color-border-popover;
}

.container-body-variant-annotation {
  background-color: awsui.$color-background-status-info;
  border-color: awsui.$color-border-status-info;
}

.container-body-size-small {
  max-inline-size: 210px;
  &.fixed-width {
    inline-size: 210px;
  }
}

.container-body-size-medium {
  max-inline-size: 310px;
  &.fixed-width {
    inline-size: 310px;
  }
}

.container-body-size-large {
  max-inline-size: 482px;
  @media (max-width: 482px) {
    // On viewports smaller than 480px, we default to the body-size-medium width
    max-inline-size: 310px;
  }
  &.fixed-width {
    inline-size: 482px;
  }
}

.container-arrow {
  $arrow-offset: 12px;
  $arrow-width: 20px;
  $arrow-height: $arrow-width * 0.5;

  position: absolute;
  display: inline-block;

  &-position-right-top,
  &-position-right-bottom {
    transform: rotate(-90deg);
    transform-origin: 0 100%;

    @include styles.with-direction('rtl') {
      transform: rotate(90deg);
      transform-origin: 100% 100%;
    }
  }

  &-position-right-top {
    inset-block-start: calc(#{$arrow-offset} + #{$arrow-height});
    inset-inline-start: 0;
  }

  &-position-right-bottom {
    inset-block-end: $arrow-offset;
    inset-inline-start: 0;
  }

  &-position-left-top,
  &-position-left-bottom {
    transform: rotate(90deg);
    transform-origin: 100% 100%;

    @include styles.with-direction('rtl') {
      transform: rotate(-90deg);
      transform-origin: 0% 100%;
    }
  }

  &-position-left-top {
    inset-block-start: calc(#{$arrow-offset} + #{$arrow-height});
    inset-inline-end: 0;
  }

  &-position-left-bottom {
    inset-block-end: $arrow-offset;
    inset-inline-end: 0;
  }

  &-position-top-center,
  &-position-top-right,
  &-position-top-left,
  &-position-top-responsive {
    transform: rotate(180deg);
    transform-origin: 50% 50%;
  }

  &-position-top-center {
    inset-block-end: -$arrow-width * 0.5;
    inset-inline-start: calc(50% - #{$arrow-height});
  }

  &-position-top-right {
    inset-block-end: -$arrow-width * 0.5;
    inset-inline-start: $arrow-offset;
  }

  &-position-top-left {
    inset-block-end: -$arrow-width * 0.5;
    inset-inline-start: calc(100% - #{$arrow-width} - #{$arrow-offset});
  }

  &-position-bottom-center {
    inset-block-start: -$arrow-width * 0.5;
    inset-inline-start: calc(50% - #{$arrow-height});
  }

  &-position-bottom-right {
    inset-block-start: -$arrow-width * 0.5;
    inset-inline-start: $arrow-offset;
  }

  &-position-bottom-left {
    inset-block-start: -$arrow-width * 0.5;
    inset-inline-start: calc(100% - #{$arrow-width} - #{$arrow-offset});
  }
}
